# 实战篇 6：心情签到页面开发

「新鲜天气」的心情签到页面结构比较简单，本小节主要介绍三部分内容：

• 使用日历插件
• 用户授权和登录流程
• 使用小程序云开发的数据库功能

# 使用日历插件

心情签到页面最重要的模块就是日历，日历使用了一个开源的日历插件，在小程序内使用插件需要经过下面三步。

# 1. 在小程序管理后台添加三方服务插件

登录小程序管理后台，依次进入「设置 -> 第三方服务」搜索日历插件的 AppID（wx92c68dae5a8bb046）就可以搜索到「极点日历」，这时候申请授权即可。

# 2. 在 app.json 中增加插件配置

第二步是在项目的 app.json 中增加 plugins 字段内容：

"plugins": {
    "calendar": {
        "version": "1.1.3",
        "provider": "wx92c68dae5a8bb046"
    }
}

# 3. 在 diary 页面增加组件配置

在 pages/diary/index.json 的页面配置中的 usingComponents 里增加 calendar 的插件地址：

{
  "usingComponents": {
    "calendar": "plugin://calendar/calendar",
    "icon": "../../components/icon/index"
  }
}

经过上面三步之后，我们就可以在页面中使用 <calendar /> 标签了。具体日历的用法，可以参考它的 wiki 主页。

# 设置日历的心情颜色

在心情设置上，笔者设计了 5 种心情，由 5 种颜色来表示，具体数值如下：

// client/pages/diary/index.js Page data
emotions: ['serene', 'hehe', 'ecstatic', 'sad', 'terrified'],
colors: {
  serene: '#64d9fe',
  hehe: '#d3fc1e',
  ecstatic: '#f7dc0e',
  sad: '#ec238a',
  terrified: '#ee1aea'
}

签到不同的心情，最终在日历上会展现出下面的效果：

要在某天设置该天的背景颜色，需要使用日历的 days-color